<template>
	<div class="set_up">
		<!-- nav-start -->
		<van-nav-bar title="我的设置" left-arrow @click-left="onClickLeft" fixed />
		<!-- nav-end -->
		<!-- 头像 -->
		<div class="con">
			<!-- denglu -->
			<div class="tx_logn" @click="logn()">
				<!-- 根据vuex用户id是否为0判断 start-->
				<van-image round width="3.5rem" height="3.5rem" :src='img' v-if="$store.users. .islogn" />
				<van-image round width="3.5rem" height="3.5rem" :src='img' v-else />
				<!-- 根据vuex用户id是否为0判断 -end-->
				<div class="righ">
					<h3>{{username}}</h3>
				</div>
			</div>
			<!-- 登录下面的-->
			<van-cell-group class="list">
				<van-cell title="阅读时长" center is-link />
				<van-cell title="最近阅读" center is-link />
				<van-cell center title="夜间模式">
					<template #right-icon>
						<van-switch v-model="checked" active-color="#ee0a24" size="24" />
					</template>
				</van-cell>
				<van-cell title="设置" center is-link />
				<van-cell title="帮助与反馈" is-link />
			</van-cell-group>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'; //引入tost
	export default {
		name: 'set_up',
		data() {
			return {
				img: require('../../assets/img/3.jpg'), //user头像url
				username: '请登录',
				checked: true, //开关
			}
		},
		//方法
		methods: {
			onClickLeft() {
				Toast('返回');
				this.$router.back()
			},
			//登录页
			logn() {
				this.$router.push({
					name: 'logn',
					params: {

					}
				})
			}
		},

	}
</script>

<style>
	.con {
		margin-top: 50px;
		display: flex;
		flex-direction: column;

	}

	.tx_logn {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.tx_logn .righ {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.list {
		margin-top: 50px;
	}
</style>
